import React, {Component} from 'react';
import {Dimensions, View} from "react-native";
import * as Animatable from 'react-native-animatable';
import PropTypes from 'prop-types';

const {width, height} = Dimensions.get('window');

/**
 * 可以使屏幕旋转置横屏，只要传入一个界面布局参数 contant
 */
export default class HorizontalScreenView extends Component {

  static propTypes = {
    contant: PropTypes.any,
  }

  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    await this.anim.transitionTo({
      rotate: '90deg',
      duration: 1,
    });
  }


  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <Animatable.View ref={(anim) => this.anim = anim} transition={['rotate']}
                         style={{
                           flex: 1,
                           flexDirection: 'column',
                           justifyContent: 'center',
                           alignItems: 'center',
                           backgroundColor: 'red',
                         }}>
          <View style={{height: width, width: height}}>
            {this.props.contant}
          </View>
        </Animatable.View>
      </View>

    );
  }
}


